<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
<link href="/editor/dist/css/style.css" rel="stylesheet"/>
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 500px; }
</style>
<body>
    <div class="layui-form timo-compile">
    <form th:action="@{/activity/activity/save}">
        <input type="hidden" name="id" th:if="${activity}" th:value="${activity.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">活动标题</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="title" placeholder="请输入活动标题" th:value="${activity?.title}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-inline">
                <div class="layui-form-item">
                    <label class="layui-form-label">上传图片</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn upload-image" name="image[]" up-field="path" up-url="/upload/image">
                            <i class="layui-icon"></i>上传图片
                        </button>
                    </div>
                    <div class="upload-show"  style="margin-left:0px;">
                        <img th:src="${activity?.url}" style="width:100px;height:100px;padding-top:5px;"/>
                    </div>
                </div>
                <input id="file_id" type="hidden" name="file_id" placeholder="请输入图片">
                <input id="ac_photo" class="layui-input" type="hidden" name="ac_photo" placeholder="请输入图片" th:value="${activity?.ac_photo}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="ac_start_time" placeholder="请输入开始时间" th:value="${activity?.ac_start_time}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="ac_end_time" placeholder="请输入结束时间" th:value="${activity?.ac_end_time}">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline" style="width:80%;text-align: center;">
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
                <input id="contents" class="layui-input" type="hidden" name="remark" placeholder="请输入文本内容" th:value="${activity?.remark}">
            </div>
<!--            <div class="layui-input-block">-->
<!--                <textarea placeholder="请输入内容" class="layui-textarea" name="remark">[[${activity?.remark}]]</textarea>-->
<!--            </div>-->
        </div>
        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: script"></script>
<script src="/editor/dist/index.js"></script>
<script>
    const { createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('editor content', html)
            // 也可以同步到 <textarea>
        }
    };

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    });

    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    });

    var contents = document.getElementById("contents").value;
    editor.setHtml(contents);
</script>
</body>
</html>